<template>
    <div>
        <el-dialog  @close="closeDialog" title="用户详情" v-model="syStore.userFlag" width="769px">
            <el-form v-loading="loading" :model="detailsData" label-width="120px">
                <el-form-item label="头像：" style="width: 50%">
                    <el-avatar shape="square" :size="100"  :src="detailsData.avatar_url" />
                </el-form-item>
                <el-form-item label="用户账号："  style="width: 50%">
                     <div>{{ detailsData.username }}</div>
                </el-form-item>
                <el-form-item label="姓名：" style="width: 50%">
                    {{ detailsData.name }}
                </el-form-item>
                <el-form-item label="手机号码：" style="width: 50%">
                    {{ detailsData.mobile }}
                </el-form-item>
                <el-form-item label="电子邮箱：" style="width: 50%">
                    {{ detailsData.email }}
                </el-form-item>
                <el-form-item label="状态：" style="width: 50%">
                    {{ detailsData.enabled }}
                </el-form-item>
                <el-form-item label="创建时间" style="width: 50%">
                    {{ detailsData.created_at }}
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import {ref,reactive,onMounted,watch,defineExpose} from "vue"
    import { usermanegeApi } from "/@/api/system/usermanege/index";
    import { systemStore } from "/@/stores/system";
	const syStore = systemStore()
    const userApi = usermanegeApi();
    const detailsData =ref({
        avatar_url:null,
        username:"",
        name:"",
        mobile:"",
        email:"",
        enabled:"",
        created_at:""
    })

    const loading = ref<Boolean>(false)
    const getDetails = (async ()=>{
        loading.value =true
        let res =await userApi.getUserDetail({id:syStore.userId});
        if(res.isSuccess){
            res.returnData.enabled=res.returnData.enabled==1?'启用':"禁用"
            detailsData.value = res.returnData
            loading.value =false
        }
    })

    const closeDialog = () =>{
        syStore.userFlag = false;
        syStore.userId = "";
        detailsData.value = {
            avatar_url:null,
            username:"",
            name:"",
            mobile:"",
            email:"",
            enabled:"",
            created_at:""
        }
    }
    onMounted(()=>{
    })

    defineExpose({
        getDetails
    });
</script>